<template>
  <div class="info-container">
    <el-descriptions direction="vertical" :column="4" border>
      <el-descriptions-item label="头像">
        <el-avatar shape="square" :size="80" :src=" baseImg + User.Image"></el-avatar>
      </el-descriptions-item>
      <el-descriptions-item label="账号">{{ User.loginName  }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ User.UserName  }}</el-descriptions-item>
      <el-descriptions-item label="角色">{{ User.RoleName  }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ User.DeptName  }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{  User.sex }}</el-descriptions-item>
      <el-descriptions-item label="出生日期">{{ formattedBirthday }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ User.phone }}</el-descriptions-item>
      <el-descriptions-item label="上次登录" :span="2">{{ formattedLastTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-switch disabled v-model="User.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-descriptions-item>
    </el-descriptions>
    <el-link style="margin:0 10px 0 0;" @click="UpdDialogVisible=true" type="primary">是否变更信息？</el-link>
    <el-link style="margin:0 10px 0 0;" @click="UpdPwdDialogVisible=true" type="primary">修改密码</el-link>
    <el-dialog title="编辑个人信息" append-to-body :visible.sync="UpdDialogVisible" width="750px">
      <Upd v-model="UpdDialogVisible" :data="User"></Upd>
    </el-dialog>
    <el-dialog title="编辑密码" append-to-body :visible.sync="UpdPwdDialogVisible" width="450px">
      <UpdPwd v-model="UpdPwdDialogVisible" :data="UserId"></UpdPwd>
    </el-dialog>
  </div>
</template>

<script>
import basepath from '../../../plugins/base'
import Upd from './Upd.vue'
import UpdPwd from './UpdPwd.vue'

export default {
  name: "PersonalData",
  data(){
    return{
      baseImg: basepath.imgUrl,
      UpdDialogVisible: false,UpdPwdDialogVisible:false,
      User:JSON.parse(sessionStorage.getItem('user')),
      UserId:JSON.parse(sessionStorage.getItem('user')).UserId
    }
  },
  computed: {
    formattedBirthday() {
      return this.formatDate(this.User.birthday);
    },
    formattedLastTime() {
      return this.formatDate(this.User.lastTime);
    },
  },
  components: {
    Upd,UpdPwd
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,"0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()
).padStart(2, "0")}:${String(date.getMinutes()).padStart(2,"0")}:${String(date.getSeconds()).padStart(2, "0")}`;
    },
  },
};
</script>